<script setup>
import { ref, nextTick } from "vue";
import { echart1 } from "./Helloword.js";
const cards = ref([
  {
    title: "总人数",
    price: 23343,
    iconColor: "text-violet-500",
    icon: "fas fa-address-card",
    total: 3892982,
    totalTitle: "总人数",
  },
  {
    title: "销售额",
    price: 18393,
    iconColor: "text-green-600",
    icon: "fas fa-apple-alt",
    total: 9387382,
    totalTitle: "总销售额",
  },
  {
    title: "订单数",
    price: 3803,
    iconColor: "text-blue-500",
    icon: "fas fa-award",
    total: 83493,
    totalTitle: "总订单数",
  },
  {
    title: "评论数",
    price: 8994,
    iconColor: "text-red-500",
    icon: "fas fa-baseball-ball",
    total: 48920,
    totalTitle: "总评论",
  },
]);
nextTick(() => {
  renderChar();
}); 
const domheight = ref((window.innerHeight - 150) / 2 + "px");
const renderChar = () => {
  new Promise((res, rej) => {
    echarts.init(document.getElementById("echart1")).dispose();
    echarts.init(document.getElementById("echart2")).dispose();
    res();
  }).then(() => {
    echarts.init(document.getElementById("echart1")).setOption(echart1);
    echarts.init(document.getElementById("echart2")).setOption(echart1);
  });
};
</script>
<template>
  <div class="welcome">
    <div class="box-card">
      <el-card
        shadow="hover"
        :body-style="{ padding: '20px' }"
        v-for="(card, index) of cards"
        :key="index"
        class="card-my"
      >
        <template #header>
          <div>
            {{ card.title }}
            <el-tag type="danger" size="small" effect="dark">月</el-tag>
          </div>
        </template>

        <section>
          <span>$29322</span>
          <i :class="[card.icon, card.iconColor]" class="text-5xl"></i>
        </section>
        <section>
          {{ card.totalTitle }}
          <span class>{{ card.total }}</span>
        </section>
      </el-card>
    </div>
     <div class="char">
      <el-card
        class="char-box"
        shadow="always"
        :body-style="{ padding: '20px' }"
      >
        <template #header>
          <div>用户统计</div>
        </template>
        <div id="echart1" :style="{ height: domheight }"></div>
      </el-card>
      <el-card
        class="char-box"
        shadow="always"
        :body-style="{ padding: '20px' }"
      >
        <template #header>
          <div>销售客</div>
        </template>
        <div id="echart2" :style="{ height: domheight }"></div>
      </el-card>
    </div> 
  </div>
</template>

<style lang="scss">
.welcome {
  padding-top: 17px;
  .box-card {
    display: flex;
    justify-content: space-around;
    flex-flow: wrap;
    .card-my {
      flex: 1;
      margin: 0 30px 0 30px;
    }
  }
  .char {
    margin-top: 40px;
    display: flex;
    justify-content: space-between;
    padding: 0 30px 0 30px;
    .char-box {
      flex: 1;
    }
    .char-box:nth-child(1) {
      margin-right: 55px;
    }
  }
}
</style>
